<template>
  <div>
    <div class="active" :style="leftstyle"></div>
    <ul class="nav">
      <li
        v-for="(item,index) in activeList"
        :key="index"
        @click="activeCheck(index)"
        :class="fontstyle==item.active?'actives_font':''"
      >{{item.name}}</li>
    </ul>

    <div class="nslist">
      <div v-for="(item,index) in defaultList" :key="index" class="nslist_item">
        <img :src="item.img" alt />
        <div>{{item.Name}}</div>
        <div>{{item.Means|textLengthSet(9)}}</div>
        <div>
              <el-link type="warning">{{'￥'+item.CurrentPrice}}</el-link>/
              <el-link type="info">{{item.Size}}</el-link>
              <img src="https://res.bestcake.com\m-images-2\list-cart.png?v=1" alt="" class="gwc" @click="gwc(item)">
            </div>
      </div>
    </div>
    <div class="wuyong"></div>
  </div>
</template>

<script>
import api from "../../core/api/index";
export default {
  data() {
    return {
      defaultList:[],
      nsList: [],
      jdList: [],
      jzList: [],
      active: 0,
      fontstyle: 0,
      activeList: [
        {
          name: "女神",
          active: 0
        },
        {
          name: "经典",
          active: 1
        },
        {
          name: "伴手礼",
          active: 1
        }
      ],
      leftstyle: "left:21%;width:9%",
      actives_font: "  font-weight: bold",
      allCakeList:[]
    };
  },
  mounted() {
    api.GetcakeList({ c: "NsCakeCenter", m: "GetJdListNew" }).then(res => {
    
      this.allCakeList = res.Tag.cakelist;
     this. allCakeList.forEach((item, index) => {
        // console.log(item);
    
        if (item.Brand == "女神系列") {
          item[
            "img"
          ] = `https://res.bestcake.com/m-images/ww/ns/${item.Name}.jpg?v=11`;
          
          this.nsList .push(item);
          this.defaultList=this.nsList
        }
        if (item.Brand == "卡思客") {
          item[
            "img"
          ] = `https://res.bestcake.com/m-images/ww/jd/${item.Name}.png?v=11`;
            this.jdList.push(item);
         
        }
        if (item.Brand == "极致蛋糕") {
          item[
            "img"
          ] = `https://res.bestcake.com/m-images/ww/jz/${item.Name}.png?v=11`;
         this.jzList.push(item);
        
        }
      });
      // console.log(allCakeList);
    });
  },
  methods: {
    activeCheck(index) {
       let classCakelist=[]
      this.activeList.forEach((value, key) => {
        if (index == key) {
          value.active = 0;
        } else {
          value.active = 1;
        }
      });
      if (index === 0) {
        this.leftstyle = "left:21%;width:9%";
        this.active = 0; 
       this.defaultList=this.nsList
      } else if (index === 1) {
        this.leftstyle = "left:44%;width:9%";
        this.active = 1;
          this.defaultList=this.jdList
      } else {
        this.leftstyle = "left:65%;width:13%";
        this.active = 2;
          this.defaultList=this.jzList
      }


    
    },
    gwc(item){
      //console.log(this.$store.state);
      let data={
        Brand:item.Brand,
        img:item.img,
        Name:item.Name,
        Gram:item.Gram,
        CurrentPrice:item.CurrentPrice,
        check:true,
        ID:item.ID
      }
      
     this.$store.commit('appendShopcar',data)
         this.$message({
          message: `${item.Name}以加入购物车!`,
          type: 'success',
            center: true,
            duration:1000
        });
    }
  }
};
</script>

<style scoped lang='scss'>
.wuyong {
  height: r(100);
}
.nslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
 
  .nslist_item {
     position: relative;
    img {
      width: r(160);
      height: r(190);
    }
    .gwc{
       width: r(20);
      height: r(20);
      display: inline-block;
      position: absolute;
      right: 0;
    }
  }
}
.actives_font {
  font-weight: bold;
}
.active {
  border-bottom: r(4) solid #1db0b8;
  transition: left 0.5s;
  position: absolute;
  top: r(110);
}
.nav {
  display: flex;
  justify-content: space-around;
  width: 70%;

  height: r(40);
  margin-top: r(30);
  margin-left: r(50);
  li {
    line-height: r(40);
    font-size: r(14);
    width: 33.33%;
    text-align: center;
  }
}
</style>